<!-- 考生注册页面 当前有默认值 -->
<template>
  <el-container style="height: 100%;">
    <el-header>
			<span class="head-title">
				<h1>公务员报名平台</h1>
			</span>
    </el-header>
    <el-main style="height: 100%; text-align: center;">
			<span>
				<h2>公务员考生注册</h2>
				<h4 style="margin-left: 350px;">———人生有几步是需要跑的，特别是当你年轻的时候！</h4>
			</span>
      <el-link icon="el-icon-edit" style="margin-left: 1160px; color:red">意见反馈</el-link>
      <el-form :model="regform" status-icon :rules="regrules" ref="regref" label-width="100px" class="reg_form">
        <el-form-item label="头像">
          <!-- 图片上传
                    action: 默认上传的路径
                    list-type: 上传组件的样式
                    on-preview ： 图片放大的函数
                    on-remove ： 图片移除时的函数
                    on-success ： 图片上传成功后的函数
        -->
          <br>
          <el-upload action="http://localhost/upload" list-type="picture-card"
                     :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="uploadSuccess"
                     :file-list="filelist">
            <i class="el-icon-plus"></i>
          </el-upload>
          <!-- 图片放大后的对话框 -->
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>

        <el-form-item label="用户名" prop="username">
          <el-input prefix-icon="el-icon-user" placeholder="请输入用户名" v-model="regform.username"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input prefix-icon="el-icon-user" placeholder="请输入姓名" v-model="regform.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="regform.sex" size="small">
            <el-radio-button label="男"></el-radio-button>
            <el-radio-button label="女"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input-number v-model="regform.age" @change="handleChange" :min="1" :max="100" label="年龄" size="small"></el-input-number>
        </el-form-item>
        <el-form-item label="身份证号" prop="idcard">
          <el-input prefix-icon="" v-model="regform.idcard" placeholder="请输入身份证号">
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" prefix-icon="el-icon-key" v-model="regform.password" placeholder="请输入密码"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" prefix-icon="el-icon-key" v-model="regform.checkPass" placeholder="请输入密码"
                    autocomplete="off">
          </el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input prefix-icon="el-icon-phone" v-model="regform.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="学历" prop="xueli">
          <el-select v-model="regform.xueli" placeholder="请选择您的学历">
            <el-option v-for="item in xuelis" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-select v-model="regform.major" placeholder="请选择您的专业">
            <el-option v-for="item in majors" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否应届" prop="isyingjie">
          <el-radio-group v-model="regform.isyingjie" size="small">
            <el-radio-button label="是"></el-radio-button>
            <el-radio-button label="否"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="现住址" prop="address">
          <router-view @address="toaddress"></router-view>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="submitForm">注册</el-button>
          <el-button type="primary" @click="resetForm">重置</el-button>
          <el-button type="infor" @click="$router.go(-1)">返回</el-button>
        </el-form-item>
        <el-checkbox v-model="checked">
          <el-dropdown>
							<span class="el-dropdown-link">
								我已阅读并同意相关服务条款和隐私政策 <i class="el-icon-arrow-down el-icon--right"></i>
							</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>《隐私政策》</el-dropdown-item>
              <el-dropdown-item>《服务协议》</el-dropdown-item>
              <el-dropdown-item>《用户规则》</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-checkbox>
      </el-form>
      <span style="text-align: center;">Copyright © 2021-2022 Tencent All Rights Reserved</span>
    </el-main>
  </el-container>
</template>

<script>
import qs from 'qs'
export default {
  data() {
    // 自定义用户名称的验证规则  value要验证的数据   callback是否成功的回调函数
    var checkName = (rule, value, callback) => {
      if (!value) { // value值时空
        return callback(new Error('姓名不能为空'))
      }
      // 判断是否符合邮箱的正则表达式规则
      var reg = /^[\u4e00-\u9fa5]{2,8}$/
      if (!reg.test(value)) { // 满足条件
        return callback(new Error('名称格式不合法'))
      }
      return callback(); // 条件满足
    };
    //自定义规则，验证身份证
    var checkIdcard = (rule, value, callback) => {
      if (!value) { // value值时空
        return callback(new Error('身份证不能为空'))
      }
      // 判断是否符合邮箱的正则表达式规则
      var reg = /^(\d{15}$)|(^\d{17}([0-9]|[xX]))$/
      if (!reg.test(value)) { // 满足条件
        return callback(new Error('身份证格式不合法'))
      }
      return callback(); // 条件满足
    };
    // 自定义规则，验证手机号
    var checkphone = (rule, value, callback) => {
      if (!value) { // value值时空
        return callback(new Error('手机号不能为空'))
      }
      // 判断是否符合手机的正则表达式规则
      var reg = /^[1][0-9]{10}$/
      if (!reg.test(value)) { // 满足条件
        return callback(new Error('手机号格式不合法'))
      }
      return callback(); // 条件满足
    };
    var checkPassword = (rule, value, callback) => {

      var reg = /^[A-Za-z0-9]{2,6}$/
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.regform.checkPass !== '') {
          this.$refs.regref.validateField('checkPass');
        }
        callback();
      }
    };
    var checkPass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.regform.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      /* 头像上传路径 */
      imgurl: 'http://localhost/showImg?filename=',
      /* 考试注册信息 */
      regform: {
        /* 头像 */
        img: '',
        /* 用户名 */
        username: '',
        /*姓名 */
        name: '',
        /* 性别 */
        sex: '',
        /* 身份证号 */
        idcard:'',
        /* 年龄 */
        age: 0,
        roleId: 0,
        /* 密码 */
        password: '',
        /* 确认密码*/
        checkPassword:'',
        /* 手机 */
        phone: '',
        /* 学历 */
        xueli: '',
        /* 专业 */
        major: '',
        /* 是否应届 */
        isyingjie: '是',
        /* 现住址 */
        address: '',
      },
      xuelis: ['专科', '本科', '硕士', '博士'],
      majors: ['法学', '会计', '财务管理', '电子科学与技术'],
      checked: false,
      /* 上传图片的预览 */
      filelist: [],
      /* 修改图片预览的路径 */
      dialogImageUrl: '',
      /* 修改图片预览的对话框 */
      dialogVisible: false,
      regrules: {
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        },
          {
            min: 2,
            max: 8,
            message: '长度在 2 到 8 个字符',
            trigger: 'blur'
          }
        ],
        idcard: [{
          validator: checkIdcard,
          trigger: 'blur'
        }],
        password: [{
          validator: checkPassword,
          trigger: 'blur'
        }],
        checkPass: [{
          validator: checkPass2,
          trigger: 'blur'
        }],
        name: [
          /* 自定义验证规则 */
          {
            validator: checkName,
            trigger: 'blur'
          }
        ],
        phone: [
          /* 自定义验证规则 */
          {
            validator: checkphone,
            trigger: 'blur'
          }
        ]


      }
    };
  },
  methods: {
    //地址转换
    toaddress(val) {
      console.log(val)
      this.regform.address = val;
      // console.log(this.regform.address)


    },
    handleChange(value) {
      this.regform.age=value;
      // console.log(this.regform.age)
    },
    submitForm() {
      if (!this.checked == true) {
        this.$message.error("请先阅读并同意服务条款！")
      } else {
        this.$refs.regref.validate(async (bo) => {

          if (bo) {
            console.log(this.regform);
            var res = await this.$http.post("addAdmin", qs.stringify(this.regform))
            this.filelist = []; // 清空图片集合数据
            this.$refs.regref.resetFields(); //	清空数据
            if (res.data.code == 200) { // 成功
              this.$message.success(res.data.message)
              // 更新页面数据
              this.$router.push("/")
            } else { // 失败
              this.$message.error(res.data.message)
            }
          }
        });
      }
    },
    resetForm() {
      this.$refs.regref.resetFields();
      this.address='';
    },
    // 图片移除的函数
    handleRemove(file, fileList) {
      //console.log(file, fileList);
      this.regrules.img = ''; // 移除图片
    },
    // 图片放大的函数
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 图片上传成功后的函数
    uploadSuccess(response) {
      //console.log(response)
      if (response.code == 200) {
        //把需要上传图片的名称付给用户对象
        this.regform.img = response.message;
        // console.log(this.regform.img)   //打印图片名
        // 处理同时上传多张图片
        // this.addUser.img.push(response.message)
      }
    }
  }
}
</script>

<style>
.reg_form {
  /* background-color: gainsboro; */
  width: 600px;
  box-shadow: 0 8px 16px gainsboro, 0 0 6px rgba(0, 0, 0, .04);
  margin: -30px auto;
  padding: 30px 50px;
  text-align: left;
}

.reg_form h2 {
  color: gray;
}

.el-header {
  background-color: #3C8DBC;
}

.head-title {
  display: inline-block;
  float: left;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>
